@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

*,*:focus,*:hover{
	outline:none;
}

body {
	font-family: 'Tajawal', sans-serif;
	user-select: none;
	background: transparent;
	display: none;
}

.overlay {
	position: fixed;
	inset: 0;
	background: radial-gradient(transparent, rgba(0, 0, 0, 0.85));
}

/* START BUBBLE CSS */

.card {
	border-radius: 10px;
	background-color: transparent;
	height: 95px;
	width: 320px;
	border: none;
}

.card-body {
	background-color: rgb(35 35 35 / 91%);
	color: rgb(255, 255, 255);
	font-size: 15px;
	font-weight: 500;
	border-radius: 50px;
	vertical-align: middle;
	font-weight: 600;
	border: 5px solid rgb(255, 0, 0);
	box-shadow: 0px 0px 5px 0px rgb(35 35 35 / 91%);
	font-size: 20px;
}

/* END BUBBLE CSS */

/* START OPTIONS MENU */

.options {
	/*display: none;*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.btn-closeinterface {
	position: absolute;
	left: 50%;
	top: 92%;
	transform: translate(-50%, -50%);
	border: 5px solid rgb(172, 22, 22);
	box-shadow: 0px 0px 5px 0px rgb(173, 24, 24);
	background-color: rgba(50, 50, 50, 0.4);
	padding: 10px 35px;
	height: 80px;
	width: 275px;
	color: rgb(255, 255, 255);
	font-size: 20px;
}

.btn-closeinterface:hover {
	background: rgb(182, 17, 17);
	color: rgb(255, 0, 0);
	box-shadow: 0px 0px 10px 0px rgb(184, 8, 8);
}

/* END OPTIONS MENU */

/* START NPC NAME MENU */

.npc-name {
	/*display: none;*/
	position: absolute;
	left: 50%;
	top: 15%;
	transform: translate(-50%, -50%);
	color: rgb(255, 255, 255);
	font-size: 55px;
	font-weight: 700;
}

/* END NPC NAME MENU */

/* START DIALOG BOX */

.dialogbox {
	position: absolute;
	right: 33.25%;
	top: 30.5%;
	transform: translate(-50%, 50%);
}

.card.arrow-left:after {
	content: "";
	position: absolute;
	left: -7px;
	top: 27.2px;
	box-shadow: 0px 0px 5px 0px rgb(35 35 35 / 91%);
	width: 30px;
	height: 30px;
	background: rgb(255, 0, 0);
	transform: rotate(45deg);
}

/* END DIALOG BOX */

.btn {
	font-weight: 600;
}

.btn:hover {
	color: rgb(255, 0, 0);
}

.btn:focus {
	box-shadow: none;
}

/* START BUTTON 1 */

.btn-diagonal1::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: skew(-18deg);
	background-color: rgba(50, 50, 50, 0.4);
	border: 5px solid rgb(255, 0, 0);
	z-index: -1;
	transition: 0.25s;
	border-radius: .25rem;
	box-shadow: 0px 0px 5px 0px rgb(35 35 35 / 91%);
}

.btn-diagonal1 {
	position: relative;
	padding: 10px 35px;
	height: 80px;
	width: 275px;
	color: rgb(255, 255, 255);
	margin-left: 14px;
}

.btn-diagonal1:hover::before {
	background: rgb(35 35 35 / 91%);
	color: rgb(255, 255, 255);
	box-shadow: 0px 0px 10px 0px rgb(35 35 35 / 91%);
}

/* END BUTTON 1 */

/* START BUTTON 2 */

.btn-diagonal2::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: skew(18deg);
	background-color: rgba(50, 50, 50, 0.4);
	border: 5px solid rgb(255, 0, 0);
	z-index: -1;
	transition: 0.25s;
	border-radius: .25rem;
	box-shadow: 0px 0px 5px 0px rgb(35 35 35 / 91%);
}

.btn-diagonal2 {
	position: relative;
	padding: 10px 35px;
	height: 80px;
	width: 275px;
	color: rgb(255, 255, 255);
	margin-right: 14px;
}

.btn-diagonal2:hover::before {
	background: rgb(35 35 35 / 91%);
	color: rgb(255, 255, 255);
	box-shadow: 0px 0px 10px 0px rgb(35 35 35 / 91%);
}

/* END BUTTON 2 */

/* START NORMAL BUTTON */

.btn-diagonalnormal {
	padding: 10px 35px;
	height: 80px;
	width: 275px;
	background-color: rgba(50, 50, 50, 0.4);
	border: 5px solid rgb(255 255 255);
	color: rgb(255, 0, 0);
	box-shadow: 0px 0px 5px 0px rgb(35 35 35 / 91%);
}

.btn-diagonalnormal:hover {
	background: rgb(35 35 35 / 91%);
	color: rgb(255, 0, 0);
	box-shadow: 0px 0px 10px 0px rgb(35 35 35 / 91%);
}

/* END NORMAL BUTTON */

/* START BUTTON 5 */

.btn-diagonal5::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: skew(18deg);
	background-color: rgba(50, 50, 50, 0.4);
	border: 5px solid rgb(255, 0, 0);
	z-index: -1;
	transition: 0.25s;
	border-radius: .25rem;
	box-shadow: 0px 0px 5px 0px rgb(35 35 35 / 91%);
}

.btn-diagonal5 {
	position: relative;
	padding: 10px 35px;
	height: 80px;
	width: 275px;
	color: rgb(255, 0, 0);
	margin-left: 14px;
}

.btn-diagonal5:hover::before {
	background: rgb(35 35 35 / 91%);
	color: rgb(255, 0, 0);
	box-shadow: 0px 0px 10px 0px rgb(35 35 35 / 91%);
}

/* END BUTTON 5 */

/* START BUTTON 6 */

.btn-diagonal6::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: skew(-18deg);
	background-color: rgba(50, 50, 50, 0.4);
	border: 5px solid rgb(255, 0, 0);
	z-index: -1;
	transition: 0.25s;
	border-radius: .25rem;
	box-shadow: 0px 0px 5px 0px rgb(35 35 35 / 91%);
}

.btn-diagonal6 {
	position: relative;
	padding: 10px 35px;
	height: 80px;
	width: 275px;
	color: rgb(255, 0, 0);
	margin-right: 14px;
}

.btn-diagonal6:hover::before {
	background: rgb(35 35 35 / 91%);
	color: rgb(255, 0, 0);
	box-shadow: 0px 0px 10px 0px rgb(35 35 35 / 91%);
}

/* END BUTTON 6 */